<template>
  <div :id="'ec' + layoutData.id" :ref="'ec' + layoutData.id" @mousedown.stop=""></div>
</template>
<script>
  import * as echarts from 'echarts';
  export default {
    props: ['layoutData'],
    data() {
      return {
        charts: null,
        resizeObserver: null
      }
    },
    watch: {
      layoutData: {
        handler(newval, oldval) {
          this.$nextTick(() => {
            this.init()
          })
        },
        deep: true
      },
    },
    mounted() {
      this.$nextTick(() => {
        this.init()
      })
    },
    methods: {
      init() {
        if (!this.charts) {
          this.charts = echarts.init(document.getElementById('ec' + this.layoutData.id))
        }
        let option = this.layoutData.config.echarts.option
        let xValue = []
        let yValue = []
        switch (this.layoutData.config.echarts.type) {
          case 'bar':
            xValue = require('../../js/bar.json').xAxis.data
            yValue = require('../../js/bar.json').series
            break;
          case 'line':
            xValue = require('../../js/line.json').xAxis.data
            yValue = require('../../js/line.json').series
            break;
          case 'pie':
            option = require('../../js/pie.json')
            break;
        }
        option.xAxis.data = xValue
        option.series = yValue
        this.charts.setOption(option, true);

        if(!this.resizeObserver) {
          this.resizeObserver = new ResizeObserver(entries => {
            //回调
            this.charts.resize()
          });
          this.resizeObserver.observe(this.$refs['ec' + this.layoutData.id]);
        }

      }
    },
  }
</script>